<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NASA中文网</title>
    <style>
        body {
            background-color: beige;
        }
        .logo {
            width: 100%;
            text-align: center;
        }
        .logo h4{
            text-shadow:2px 2px 5px red;
        }
        ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
  text-align: center;
}
.one .two {
  display: none;
}
.one li :hover .two {
  display: block;
}
.one .two li {
  background-color: cadetblue;
}
.one .two li :hover{
  background-color: honeydew;
}
li {
  float: center;
  
}

li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #ddd;
  color: aqua;
}

li a.active {
  color: white;
  background-color: burlywood;
}
.banner {
        width: 820px;
        margin: 20px auto;
       }
.banner img {
    width: 100%;
    height: 0%;
}
    </style>
</head>
<body>
<div class="logo">
    <img src="th.jfif">
    <h4>NASA中文网</h4>
    <p>保护地球，探索宇宙，发现文明</p>
</div>
<div class="nav">
    <ul class="one">
        <li><a class href="1.html">关于我们</a></li>
        <li><a href="2.html">机构</a></li>
        <ul class="two">
          <li>管理机构</li>
          <li>研发机构</li>
          <li>实验机构</li>
        </ul>
        <li><a href="3.html">研究计划</a></li>
        <li><a href="4.html">报告</a></li>
      </ul>
</div>
<div class="banner">
    <img src="1.jpg">
</div>
</body>
</html>